<template>
  <div class="_supFriend">
    <div class="headCardCon">
      <div class="cardCon">
        <van-image round class="headImg" :src="headImg" alt />
        <div class="nickName">您的好友{{nickName}}</div>
        <div class="nickTitle">邀请您帮TA助力，完成秒杀任务</div>
        <div class="secCon">
          <div class="seckillContainer">
            <div class="seckillItem">
              <div class="imgCon">
                <img :src="seckillGoods.img" alt />
              </div>
              <div class="contentCon">
                <div class="contentTitle">{{seckillGoods.title}}</div>
                <div class="priceCon">
                  助力价
                  <span class="seckillSym">￥</span>
                  <span class="seckillPrice">{{seckillGoods.seckillPrice}}</span>
                  <span class="price">{{seckillGoods.price}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="contextCon">
          <van-slider v-if="num < 5" :value="rate" active-color="#051d2d" bar-height="3.333vw">
            <template #button>
              <div style="display:none"></div>
            </template>
          </van-slider>
          <div class="supContent" v-if="num < 5">
            已助力
            <span>{{num}}</span>人，还差
            <span>{{lackNum}}</span>位好友
          </div>
          <div v-if="num >= 5" class="sucContent">好友已完成助力</div>
        </div>
        <div class="btnCon">
          <div v-if="num < 5" class="btnItem">
            <van-button class="opeBtn bgPrimary" round @click="supBtnClick">帮TA助力</van-button>
          </div>
          <div class="btnItem">
            <van-button class="opeBtn bgSecondary" round @click="joinClick">我要参加</van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="tabsContainer">
      <div class="tabsCon">
        <van-tabs v-model="active">
          <van-tab title="直播间">
            <div class="liveCon">
              <live-img-con />
            </div>
          </van-tab>
          <van-tab title="助力产品">
            <div class="seckillContainer">
              <div class="seckillItem" v-for="(item,index) in seckillItem" :key="index">
                <div class="imgCon">
                  <img :src="item.img" @click="seckClick(index+1)" alt />
                </div>
                <div class="contentCon">
                  <div class="contentTitle">{{item.title}}</div>
                  <div class="priceCon">
                    助力价
                    <span class="seckillSym">￥</span>
                    <span class="seckillPrice">{{item.seckillPrice}}</span>
                    <span class="price">{{item.price}}</span>
                  </div>
                  <div class="btnCon">
                    <van-button size="mini" @click="seckClick(index+1)">立即助力</van-button>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title disabled></van-tab>
          <van-tab title disabled></van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import seckillImg1 from "@/assets/切图/直播页面-正式稿_05.jpg";
import seckillImg2 from "@/assets/切图/直播页面-正式稿_08.jpg";
import seckillImg3 from "@/assets/切图/直播页面-正式稿_10.jpg";
import LiveImgCon from "@/components/LiveImgCon";
import { mapMutations, mapActions } from "vuex";
import qs from "qs";
import { Toast, Slider, Image, Dialog, Button, Tab, Tabs } from "vant";
import { utf16toEntities, uncodeUtf16 } from "@/js/utils";
export default {
  components: {
    [Slider.name]: Slider,
    [Image.name]: Image,
    [Button.name]: Button,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    LiveImgCon
  },
  data() {
    return {
      active: 1,
      gid: 0,
      canClick: false,
      headImg: "",
      nickName: "",
      num: 0,
      lackNum: 5,
      rate: 0,
      seckillGoods: {
        title: "成人乳胶枕防螨虫矫正脊椎",
        seckillPrice: "0.01",
        price: "￥399",
        img: seckillImg1,
        rate: 0,
        num: 0,
        remian: 0
      },
      seckillItem: [
        {
          title: "成人乳胶枕防螨虫矫正脊椎",
          seckillPrice: "0.01",
          price: "￥399",
          img: seckillImg1,
          rate: 0,
          num: 0,
          remian: 0
        },
        {
          title: "儿童乳胶枕防螨虫矫正脊椎",
          seckillPrice: "0.01",
          price: "￥219",
          img: seckillImg2,
          rate: 0,
          num: 0,
          remian: 0
        },
        {
          title: "儿童万用棉毯",
          seckillPrice: "0.01",
          price: "￥159",
          img: seckillImg3,
          rate: 0,
          num: 0,
          remian: 0
        }
      ]
    };
  },
  computed: {
    activityMsg() {
      return this.$store.state.activityMsg;
    },
    supCount() {
      return this.$store.state.activity.supCount;
    },
    supInfo() {
      return this.$store.state.activity.supInfo;
    },
    avList() {
      return this.$store.state.activity.avList;
    }
  },
  watch: {
    activityMsg: {
      deep: true,
      immediate: true,
      handler(val, oldVal) {
        if (val && val.srAsId) {
          // this.initData(val);
        }
      }
    },
    avList: {
      deep: true,
      immediate: true,
      handler(val, oldVal) {
        if (val.length > 0) {
          this.num = val.length;
          this.lackNum = val.length < 5 ? 5 - val.length : 0;
          this.rate = (val.length / 5) * 100;
        }
      }
    },
    supInfo: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.asOpenid) {
          this.initData2(val);
        }
      }
    }
  },
  mounted() {
    Toast.loading({ forbidClick: true });
  },
  methods: {
    ...mapActions({
      getUserSupId: "activity/getUserSupId",
      supFriend: "activity/supFriend",
      getSupInfo: "activity/getSupInfo"
    }),
    initData(acMsg) {
      this.getSupInfo({
        assistId: acMsg.srAsId
      })
        .then(res => {
          if (res && res.code == "000000") {
            if (this.$store.state.userId == res.portActivityAssist.asOpenid) {
              //当前人打开自己的助力
              Toast.clear();
              this.$router.replace({
                name: "mySup"
              });
            } else {
              if (res.portActivityAssist.asProductid) {
                let p = res.portActivityAssist.asProductid;
                switch (p) {
                  case "1": {
                    this.bgImg = bgImg1;
                    break;
                  }
                  case "2": {
                    this.bgImg = bgImg2;
                    break;
                  }
                  case "3": {
                    this.bgImg = bgImg3;
                    break;
                  }
                }
                this.canClick = true;
              }
            }
          } else {
            Toast("获取助力信息失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    initData2(val) {
      console.log("initData2val", val);
      try {
        let info = JSON.parse(val.asInfo);
        this.headImg = info.headImgUrl;
        this.nickName = uncodeUtf16(info.nickname);
        this.canClick = true;
        let gid = parseInt(val.asProductid);
        this.gid = gid;
        switch (gid) {
          case 1: {
            this.seckillGoods = this.seckillItem[0];
            break;
          }
          case 2: {
            this.seckillGoods = this.seckillItem[1];
            break;
          }
          case 3: {
            this.seckillGoods = this.seckillItem[2];
            break;
          }
        }
        Toast.clear();
      } catch (error) {
        Dialog.alert({ message: "初始化信息失败" });
      }
    },
    supBtnClick() {
      if (this.canClick) {
        if (this.$store.state.userId == this.supInfo.asOpenid) {
          Dialog({ message: "不能为自己助力哦~" });
        } else {
          this.supFriend({
            helperOpenId: this.$store.state.userId,
            assistId: this.activityMsg.srAsId,
            helperInfo: utf16toEntities(JSON.stringify(this.$store.state.userInfo))
          })
            .then(res => {
              if (res && (res.code == "000000" || res.code == "000030")) {
                let self = this;
                Dialog({
                  message: "您已为Ta助力成功",
                  confirmButtonText: "参与0.01元助力",
                  closeOnClickOverlay: true,
                  beforeClose: (action, done) => {
                    self.$router.push({
                      name: "act7index"
                    });
                    done();
                  }
                });
              } else {
                Toast(res.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      } else {
        Toast("获取信息失败，请重新打开页面");
      }
    },
    startBtnClick() {
      if (this.$store.state.activity.supInfoMy.asProductid) {
        //当前人有发起过助力
        this.$router.push({
          name: "mySup",
          query: {
            ...this.$route.query,
            gid: this.$store.state.activity.supInfoMy.asProductid
          }
        });
      } else {
        this.$router.push({
          name: "startSup",
          query: {
            ...this.$route.query,
            gid: this.gid
          }
        });
      }
    },
    joinClick() {
      this.$router.push({
        name: "act7index"
      });
    },
    seckClick(item) {
      if (
        this.$store.state.activity.supInfoMy.asProductid &&
        this.$store.state.activity.supInfoMy.asProductid != item
      ) {
        //当前人有发起过助力，且点击的不是助力的商品
        // this.$router.push({
        //   name: "mySup",
        //   query: {
        //     ...this.$route.query,
        //     gid: this.$store.state.activity.supInfoMy.asProductid
        //   }
        // });
        Dialog({ message: "你已发起过助力，请点击已发起助力的商品进行查看" });
      } else {
        this.$router.push({
          name: "startSup",
          query: {
            ...this.$route.query,
            gid: item
          }
        });
      }
    }
  }
};
</script>

<style lang="scss">
._supFriend {
  box-sizing: border-box;
  background-image: linear-gradient(#083552, #062132, #0a7fc2);
  .headCardCon {
    padding: 105px 25px 30px 25px;
    box-sizing: border-box;
    .cardCon {
      box-sizing: border-box;
      background-color: white;
      padding-top: 65px;
      padding-bottom: 30px;
      border-radius: 10px;
      position: relative;
      .headImg {
        position: absolute;
        width: 106px;
        height: 106px;
        top: -53px;
        left: 281px;
      }
      .nickName {
        text-align: center;
        font-size: 30px;
        padding-bottom: 28px;
      }
      .nickTitle {
        text-align: center;
        font-size: 26px;
      }
      .secCon {
        padding: 17px;
      }
      .contextCon {
        padding: 17px 17px 47px 17px;
        .supContent {
          margin-top: 12px;
          text-align: center;
          font-size: 0.18rem;
          color: #828282;
          span {
            color: $font-color-primary;
          }
        }
        .sucContent {
          text-align: center;
          font-size: 42px;
        }
      }
      .seckillContainer {
        background-color: white;
        .seckillItem {
          padding: 16px 20px 10px 20px;
          display: flex;
          background-color: #f3f3f3;
          border-radius: 10px;
          .imgCon {
            padding-right: 26px;
            img {
              width: 191px;
              height: 146px;
              display: block;
            }
          }
          .contentCon {
            flex: 1;
            .contentTitle {
              font-size: 24px;
              font-weight: 700;
              color: #030406;
            }
            .priceCon {
              font-size: 22px;
              color: #030406;
              padding-top: 10px;
              .seckillSym {
                font-size: 24px;
                color: #051c2a;
                font-weight: 600;
              }
              .seckillPrice {
                font-size: 40px;
                color: #051c2a;
                font-weight: 600;
              }
              .price {
                font-size: 22px;
                text-decoration: line-through;
                color: #d7d7d7;
              }
            }
          }
        }
      }
      .btnCon {
        padding: 0 10px;
        display: flex;
        .btnItem {
          flex: 1;
          padding: 0 20px 0 30px;
        }
        .opeBtn {
          width: 100%;
          color: white;
          font-size: 30px;
          height: 68px;
          font-weight: 300;
        }
        .bgPrimary {
          background-color: $bg-primary;
        }
        .bgSecondary {
          background-color: $bg-secondary;
        }
      }
    }
  }

  .liveCon {
    height: 600px;
  }

  .tabsContainer {
    padding: 0 25px 66px 25px;
    .tabsCon {
      border-radius: 10px;
      background-color: white;
    }
    .van-tabs--line .van-tabs__wrap {
      height: 86px;
      border-radius: 10px 10px 0 0;
    }
    .van-tabs__line {
      background-color: #101f60;
      height: 5px;
    }
    .van-tab__text {
      font-size: 28px;
    }
    .van-tab--active {
      font-weight: 600;
    }
    .seckillContainer {
      background-color: white;
      .seckillItem {
        padding: 30px 44px 34px 22px;
        border-top: 2px solid #d0d0d0;
        display: flex;
        .imgCon {
          padding-right: 30px;
          img {
            width: 172px;
            height: 132px;
          }
        }
        .contentCon {
          flex: 1;
          .contentTitle {
            font-size: 24px;
            font-weight: 700;
            color: #030406;
          }
          .priceCon {
            font-size: 20px;
            color: #030406;
            padding-top: 10px;
            .seckillSym {
              font-size: 20px;
              color: #051c2a;
              font-weight: 600;
            }
            .seckillPrice {
              font-size: 32px;
              color: #051c2a;
              font-weight: 600;
            }
            .price {
              font-size: 20px;
              text-decoration: line-through;
              color: #d7d7d7;
            }
          }
          .btnCon {
            display: flex;
            justify-content: flex-end;
            .van-button--mini {
              font-size: 20px;
              padding: 10px 30px;
              background-color: #0b2639;
              border-color: #0b2639;
              color: white;
              border-radius: 10px;
              height: 40px;
            }
          }
          .numCon {
            color: #828282;
            font-size: 0.1rem;
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            .numColor {
              color: $font-color-primary;
            }
            .sliderCon {
              display: flex;
              align-items: flex-end;
              padding-bottom: 5px;
              width: 170px;
            }
          }
        }
      }
      &:last-child {
        border-radius: 0 0 10px 10px;
      }
    }
  }
}
</style>